<template>
    <div class="area">
		<el-form :inline="true" :model="ruleForm" class="demo-form-inline" style="width:92%">
			<el-form-item label="区域:" prop="areaId" >
				<el-select v-model="ruleForm.areaId" filterable @change="selectregion">
					<el-option v-for="(item,index) in regionlist"
					           :key="index"
					           :label="item.name"
					           :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="片区:" prop="id" >
				<el-select v-model="ruleForm.id" filterable>
					<el-option v-for="(item,index) in arealist"
					           :key="index"
					           :label="item.name"
					           :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary"  @click="searchList" id="monitorEnter">查询</el-button>
				<el-button type="primary"  @click="operate('add')">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column label="片区" width="120" prop="name" align="center"></el-table-column>
			<el-table-column label="区域" width="120" prop="areaName" align="center"></el-table-column>
			<el-table-column label="关联城市、区县" prop="detailStr" align="center">
				<template slot-scope="scope">
					<p  class="boxinfo" style="-webkit-box-orient: vertical;">{{scope.row.detailStr}}</p>
				</template>
			</el-table-column>
			<el-table-column label="负责人" width="200" prop="headNameStr" align="center"></el-table-column>
			<el-table-column label="操作" width="150" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="operatehander(scope.row,'edit')">编辑</el-button>
					<el-button type="text" @click="operatehander(scope.row,'del')">删除</el-button>
					<el-button type="text" @click="operatehander(scope.row,'see')">查看</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagebar">
		    <el-pagination
		            background
		            layout="total, sizes, prev, pager, next"
		            :current-page.sync="ruleForm.pageNum"
		            :page-sizes="[10, 20, 30, 40]"
		            :page-size="ruleForm.pageSize"
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :total="totalSize">
		    </el-pagination>
		</div>
    </div>
</template>
<script>

import api from "@/api/apiPath"
export default {
	name:'AreaManagement',
	title:'片区管理',
    data() {
        return {
			regionlist:[],//区域
			arealist:[],//片区
			citys:[],
			tableData:[],
			ruleForm:{
				areaId:'',
				id:'',
				pageNum: 0,
				pageSize: 10,
			},
			totalSize: 0
        }
    },
    created(){
    	this.getlist()
    	this.getarealist()
    },
    activated(){
		this.searchList()
    },
    methods: {
    	selectregion(){
    		this.ruleForm.id = ''
    		if (this.ruleForm.areaId == '') {
    			this.arealist = []
    			return
    		}
    		this.ruleForm.id = ''
			this.axios.get(api.REGIONGETREGIONAREA+this.ruleForm.areaId).then(res=>{
				if (res.data.code == 200) {
					console.log(res);
					
					this.arealist = res.data.data
				}
			})
    	},
    	getarealist(){
    		this.axios.get(api.REGIONGETAREALIST).then(res=>{
    			if (res.data.code == 200) {
    				this.regionlist = res.data.data
    				this.regionlist.unshift({id:'',name:'全部'})
    			}
    		})
    	},
    	operatehander(row,type){
    		if (type !=='del') {
    			this.$router.push({path:'/AreaManagementDetail',query:{pageType:type,id:row.id}})
    		}else{
				this.$confirm('确认删除该条信息？', '提示', {
					 confirmButtonText: '确定',
					 cancelButtonText: '取消',
					 type: 'warning'
					}).then(() => {
						this.axios.get(api.REGIONDELETE+row.id).then(res=>{
							if (res.data.code == 200) {
								this.$message({
								    message: '删除成功',
								    type: 'success'
								});
								this.getlist()
							}
						})
					}).catch(() => {
					 this.$message({
					   type: 'info',
					   message: '已取消'
					 });          
					});
    		}
    	},
		searchList(){
			this.ruleForm.pageNum = 1
			this.getlist();
		},
		operate(type){
			this.$router.push({path:'/AreaManagementDetail',query:{pageType:'add'}})
		},
		handleCurrentChange() {
		    this.getlist()
		},
		handleSizeChange(val) {
		    this.ruleForm.pageSize = val
		    this.getlist();
		},
		getlist(){
			this.axios.post(api.GEGINONLIST,this.ruleForm).then(res=>{
				if (res.data.code == 200) {
					this.tableData = res.data.data.list
					this.totalSize = res.data.data.total
				}

			})

		}
    }
}
</script>
<style lang="stylus" scoped>

	.boxinfo 
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;

</style>